/**
 * Created by Administrator on 2017/12/4.
 */
import React from 'react';
import {
    R_header_fixed
} from '../common/index'
import {
    HttpService,
    Tips,
    pullDownRefresh,
    fmtDate
} from '../../Tools'

import Sunflower from './img/sunflower.jpg'
import Banner from '../../img/shengji/1.png'
import {Button} from 'antd'
import './style/business.scss'
// import './mock/useInfo'
export  default  class UseInfo extends React.Component {
    constructor(props) {
        super(props);
        this.page = 1;
        this.pagesize = 10;
        this.toBottom = 60;
        this.state = {
            showTab: true,
            dataList: [],
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0,

        }
    }

    componentWillUnmount() {
        window.onscroll = null
    }
    componentDidMount() {

        this.getData()
        //加载更多
        window.onscroll = () => {
            const {
                dataEnd,
                dataNull,
                page
            } = this.state;
            if (this.dataLoad == 1 || dataEnd == 1 || dataNull == 1)
                return;
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            if (document.body.clientHeight - window.innerHeight - scrollTop <= this.toBottom) {
                // debugger
                this.page++;
                this.getData();
            }
        }
        const obj = document.getElementById('refreshbox')
        const contentObj = document.getElementById('pdownrefresh')
        const statusObj = document.getElementById('status')
        let rct = this;
    }

    //获取数据列表
    getData(status) {
        let companyId=this.props.params.companyId;
        this.dataLoad = 1
        this.setState({
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0
        });
        if (status == 1)
            this.page = 1
        HttpService.query({
            url: '/jf/business/goodsArchives/pageJfGoodsUse',
            data: {
                token: localStorage.btoken,
                page: this.page,
                size: this.pagesize,
                goodsArchId:companyId
            },
            success: (res => {
                if(res.code == "10140"){
                    this.dataLoad = 0
                    this.setState({
                        dataLoad: 0
                    });

                    //获取数据成功
                    let dataList = res.data.list
                    if (status != 1){
                        dataList = this.state.dataList.concat(res.data.list);
                    }

                    this.setState({
                        dataList
                    });
                    if (res.data.totalPages == this.page) {
                        this.setState({
                            dataEnd: 1
                        });
                    } else if (res.data.list.length < this.pagesize) {
                        this.setState({
                            dataEnd: 1
                        });
                        if (dataList.length == 0) {
                            this.setState({
                                dataEnd: 0,
                                dataNull: 1
                            });
                        }
                    }
                    return;
                }else{
                    Tips(res.data)
                }



            })
        })
    }

    render() {
        const {
            dataList,
        } = this.state;
        const getNumber=this.props.params.get;
        const unUsed=this.props.params.unUsed;
        const used=this.props.params.used;
        let dataLists='';
        if(dataList.length>0){
            dataLists = dataList.map(function (item) {
                return (
                    <li className="list">
                        <div><span>商品名：</span>{item.goodsArchName}</div>
                        <div><span>券号：</span>{item.serialNumber}</div>
                        <div><span>使用状态：</span>{item.usedtimes>0 ? <span style={{color: '#187BFB'}}>已消费</span> :<span style={{color:'#999'}}>未消费</span>}</div>
                        {/*<div><span>帐号：</span>{item.peopletel}</div>*/}
                        <div><span>领取时间：</span>{fmtDate(item.getTime)}</div>
                        <div><span>使用时间：</span>{item.usedtimes>0 ?fmtDate(item.useTime):'--'}</div>
                    </li>
                )
            }.bind(this))
        }

        return (
            <div className="useDetail" >
                <R_header_fixed left="1" title="使用情况"/>
                <div className="totalInfo">
                    <div>领取量：<span>{getNumber}</span></div>
                    <div>未使用：<span>{unUsed}</span></div>
                    <div>已使用：<span>{used}</span></div>
                </div>
                <div id='refreshbox' className="refreshbox">
                    <div id='pdownrefresh'>
                        <div id='status'><span></span></div>
                            <ul className="useList">
                                {dataLists}
                            </ul>
                    </div>
                </div>
            </div>

        )
    }
}
